git <template>
<div class="all">
  <div class="wxShare_header">
    <img src="../../images/wxShareHeader.png" alt="">
  </div>
	<div class="wxShare_content">
      <div class="wxShare_code_bg white_bg">
        <img class="ball" style="position: absolute;height: 12rem;top: 3rem;left:0;width:100%;" src="../../images/wxShareBall.png"/>
        <p class="wxShare_title">长按识别二维码，关注芸券领好礼</p>
        <div class="QRCode">
          <div id="qrcode"></div>
        </div>
      </div>
      <div class="wxShare_bg">
        <img src="../../images/wxShare_code_bg_01.png"/>
      </div>
			<ul class="wxShare_gift_wrp">
        <li class="wxShare_gift_01">
          <div class="">
            <img src="../../images/wxShare_gift_01.png" alt="">
          </div>
        </li>
				<li class="wxShare_gift_02">
          <div class="">
            <img src="../../images/wxShare_gift_02.png" alt="">
          </div>
          <p>666芸券</p>
        </li>
				<li class="wxShare_gift_03">
          <div class="">
            <img src="../../images/wxShare_gift_04.png" alt="">
          </div>
          <p>3把铲子</p>
        </li>
				<li class="wxShare_gift_04">
          <div>
            <img src="../../images/wxShare_gift_03.png" alt="">
          </div>
          <p>优惠券</p>
        </li>
			</ul>
      <div class="wxShare_bg_bottom">
        <img src="../../images/wxShare_bg_bottom.png" alt="">
      </div>
	</div>
</div>
</template>

<script>
import 'src/assets/js/qrcode.js';
import getData from '../../service/getData.js'

import {
  mapState
} from 'vuex'

export default {
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
  },
  destroyed() {
    document.body.style.background = '';
  },
  mounted: function() {
    document.body.style.background ='#ed3c8b'
		let that = this
		getData.shareGetreward({openId: that.$route.query.id}).then(res => {
			that.$nextTick(function () {
				if (res.respCode === '00') {
					let qrcode = new QRCode(document.getElementById("qrcode"), {
						width : 132,//设置宽高
						height : 132
					});
					qrcode.makeCode(res.content)
				}
			})
		})
  },
}
</script>

<style scoped>
.all{
  height: 100%;
	background: url(../../images/wxSharebg2.png) no-repeat;
	background-size:100% 100%;
}
.wxShare_header{}
.wxShare_header img{
  width: 100%;
}
.wxShare_content{
  background: url(../../images/wxShare_01.png) no-repeat;
  background-position:center  0;
  background-size: 96%;
  margin-top: -6%;
  padding-top: 10px;
  text-align: center;
  position: relative;
}
.wxShare_code_bg {
  background-size: 100%;
  width: 86%;
  margin: -1% auto 0;
  /*overflow: hidden;*/
  position: relative;
}
.wxShare_code_bg::before, .wxShare_code_bg::after {
  display: block;
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: url('../../images/wxShare_bg_image.png') no-repeat;
  background-size: cover;
  top: 0;
}
.wxShare_code_bg::before {
  left: -0.5rem;
}
.wxShare_code_bg::after {
  right: -0.5rem;
  transform:scaleX(-1);
}
.wxShare_bg {
  width: 86%;
  margin: auto;
}
.wxShare_bg img {
  max-width: 100%;
}
.wxShare_title{
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  padding: 1.2rem 0;
}
.QRCode {
  width: 9.6rem;
  margin: auto;
}
.QRCode::after {
  display: block;
  content: '';
  width: 100%;
  height: 1.2rem;
}
.QRCode img {
  max-width: 100%;
}
ul.wxShare_gift_wrp {
  background-color: #fff;
  overflow: hidden;
  width: 86%;
  margin:-0.3rem auto 0;
  padding: 1rem;
}
ul.wxShare_gift_wrp li{
  float: left;
  width: 25%;
  text-align: center;
  height: inherit;
  height: 5rem;
  bottom: 0;
  box-sizing: border-box;
  border-right: 1px dotted #ccc;
}
ul.wxShare_gift_wrp li:last-child {
  border-right: none;
}
ul.wxShare_gift_wrp li > div {
  height: 3.8rem;
}
li.wxShare_gift_01 {
  padding-right: 0.8rem;
}
li.wxShare_gift_01 img {
  max-width: 100%;
}
li.wxShare_gift_02 img {
  max-width: 80%;
  transform: translateY(25%);
}
li.wxShare_gift_03 img {
  max-width: 60%;
}
li.wxShare_gift_04 img {
  max-width: 50%;
}
.wxShare_bg_bottom {
  width: 86%;
  margin: -0.5rem auto 0;
}
.wxShare_bg_bottom img {
  max-width: 100%;
}
</style>
